<template>
	<view class="orderConfirm">
		<!-- tab 选择栏 -->
		<view class="tab_box flex-r-b-s">
			<view @click="tabCurrent = 0" :class="[tabCurrent == 0?'tab_item active1':'tab_item active3','flex-c-c-c']">
				<text>门店自提</text>
			</view>
			<view @click="fn_isone()" :class="[tabCurrent == 1?'tab_item active2':'tab_item active','flex-c-c-c']">
				<text>邮寄到家</text>
			</view>
			<view
				style="position:absolute;bottom: 0;left: 30px;width: 280px;background-color:#FFFFFF;z-index: 88;height:20px;">
			</view>
		</view>
		<!-- 自提地址信息 -->
		<view class="address_box" v-if="tabCurrent == 0">
			<view class="address one-line-ellipsis">{{orderConfirm.store.address}}</view>
			<view class="address_b flex-r-s-c">
				<view class="name">{{orderConfirm.store.mobile_name}}</view>
				<view class="tel">{{orderConfirm.store.mobile}}</view>
			</view>
		</view>
		<!-- 邮寄地址信息 -->
		<view class="address_box" v-if="tabCurrent == 1" @tap.stop="goAddressList">
			<view class="address one-line-ellipsis" v-if="addressInfo">{{addressInfo.province}}{{addressInfo.address}}
			</view>
			<view class="address_b flex-r-s-c" v-if="addressInfo">
				<view class="name">{{addressInfo.name}}</view>
				<view class="tel">{{addressInfo.mobile}}</view>
			</view>
			<view class="flex-c-c-c" style="width: 100%;height: 160rpx;" v-if="!addressInfo">
				<view class="flex-c-c-c"
					style="color: #0F4C3A;font-size: 28rpx;font-weight: bold;width: 590rpx;height: 78rpx;background: rgba(15, 76, 58, 0.13);border: 2rpx solid rgba(15, 76, 58, 0.5019607843137255);border-radius: 12rpx;">
					+&nbsp;&nbsp;立即添加收货地址
				</view>
			</view>
		</view>
		<!-- 产品列表 -->
		<view class="list_box">
			<view class="title">服务详情：</view>

			<view class="list flex-r-b-c" v-for="(item,index) in orderConfirm.goods" :key="index">
				<image :src="url + item.image" mode="widthFix"></image>
				<view class="list_f">
					<view class="name">{{item.name}}</view>
					<view class="introduce one-line-ellipsis">{{item.describe}}</view>
					<view class="service" v-if="item.sname != null">{{item.sname}} <text
							style="display: inline-block; margin-left: 20rpx;">X{{item.snum}}</text></view>
					<view class="list_f_b flex-r-b-c">
						<view class="money">¥<text>{{item.price}}</text></view>
						<view class="number">X<text>{{item.num}}</text></view>
					</view>
				</view>
				<view class="give" v-if="item.is_giveaway == 1">赠送商品</view>
			</view>

		</view>
		<!-- 详情 -->
		<view class="details_box">
			<view class="list flex-r-b-c">
				<view class="name">商品合计</view>
				<view class="money">¥<text>{{orderConfirm.price}}</text></view>
			</view>
			<view class="list flex-r-b-c" @tap.stop="isCuponList">
				<view class="name">优惠券</view>
				<view class="coupon" v-if="orderConfirm.coupon == 0">暂无可用</view>
				<view class="coupon" style="color: red;" v-else-if=" couponText != '' ">- {{couponText}}</view>
				<view class="coupon" v-else>可使用的 <text
						style="display: inline-block; color: red;">{{orderConfirm.coupon.length}}</text> 张优惠券</view>
			</view>
			<view class="list flex-r-b-c" @click="checkedChange()">
				<view class="name">可使用{{orderConfirm.integral}}积分抵扣{{orderConfirm.iprice}}元</view>
				<view class="checkbox">
					<view class="flex-c-c-c"
						style="height: 40rpx;width: 40rpx;border-radius: 50%;border-width: 1rpx; border-style: solid;"
						:style="{backgroundColor:checked?'#45806E':'#FFF',borderColor:checked?'#45806E':'#b5b5b5'}">
						<u-icon name="checkbox-mark" color="#FFF" size="25"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom_box flex-r-b-c">
			<view class="list_l flex-r-s-c">
				<view class="text">合计：</view>
				<view class="money">¥<text>{{totalPrice<0?0:totalPrice}}</text></view>
			</view>
			<view class="list_f flex-r-s-c">
				<view class="list_f_l flex-r-s-c">
					<view class="text">已优惠</view>
					<view class="money">
						¥<text>{{discountPrice>orderConfirm.price?orderConfirm.price:discountPrice}}</text></view>
				</view>
				<view class="btn" @click="fk_fns()">付款</view>
			</view>
		</view>
		<!-- 待付款详情 -->
		<!-- 		<view class="pendingPayment_box">
			<view class="list flex-r-b-c">
				<view class="name">优惠卷</view>
				<view class="coupon">-¥<text>10</text></view>
			</view>
			<view class="list flex-r-b-c">
				<view class="name">已使用100积分抵扣1元</view>
			</view>
		</view> -->
		<!-- 待付款订单信息 -->
		<!-- 		<view class="order_box">
			<view class="title">订单信息</view>
			<view class="order_list flex-r-b-c">
				<view class="name">订单编号：</view>
				<view class="orderNumber">8865ishfn990u0 <text>复制</text></view>
			</view>
			<view class="order_list flex-r-b-c">
				<view class="name">下单时间：</view>
				<view class="time">2021-10-06 13:00:43</view>
			</view>
		</view> -->
		<!-- 待付款 bottom -->
		<!-- 		<view class="pendingPayment_bottom flex-r-b-c">
			<view class="cancel">取消</view>
			<view class="payment">付款</view>
		</view> -->


		<!-- 可用优惠卷弹框 -->
		<u-popup class="couponPopup" v-model="isCoupon" mode="bottom" border-radius="20" height="70%" closeable>
			<view class="flex-r-s-c" style="width: 750rpx;height: 100rpx;">
				<view style="width: auto; box-sizing: border-box; padding: 20rpx; border-radius: 30rpx; background: #45806E; color: #ffffff; font-size: 25rpx; margin-left:40rpx;" @click="falseCoupun()">不使用优惠劵</view>
			</view>
			<!-- 优惠券列表 -->
			<view class="list flex-r-s-c" style="background-image: url(https://yft.yangfatang.cn/upload/bg/bg3.png);"
				v-for="(item,index) in orderConfirm.coupon" :key="index">
				<view class="list_l flex-r-c-c">
					<view class="list_l_l" v-if="item.type == 2">¥<text>{{item.price}}</text></view>
					<view class="list_l_l" v-else><text>{{item.discount}}</text>折</view>
					<view class="list_l_r">
						<view class="name">{{item.type == 1 ? '折扣券' : '满减券' }}</view>
						<view class="limit">{{item.title}}</view>
					</view>
				</view>
				<view class="list_r" @tap.stop="popupBtn(item)">{{couponId == item.coupon_id ? '已使用' : '使用'}}</view>
			</view>
		</u-popup>
		<!-- 下拉支付方式 -->
		<u-popup class="couponPopup" v-model="istoPay" mode="bottom" border-radius="20" height="70%" closeable>
			<view class="flex-c-c-c" style="color: #4A4A4A;font-size: 32rpx;line-height: 100rpx;">选择支付方式</view>
			<!-- 微信支付 -->
			<view class="flex-r-b-c"
				style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;margin-top: 50rpx;">
				<view class="flex-r-b-c">
					<u-icon name="weixin-fill" color="#00BC0C" size="55"></u-icon>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">微信支付</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;">
					<u-checkbox v-model="isVXpay" @change="isBalancePay=false;isGoods_price=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 余额支付 -->
			<view class="flex-r-b-c" style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;">
				<view class="flex-r-b-c">
					<image src="../../static/icon/yue.png" mode="widthFix" style="width: 45rpx;"></image>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">余额支付</text>
					<text
						style="color: #4B4B4B;font-size: 24rpx;margin-left: 24rpx;">当前余额：¥{{orderConfirm.balance}}</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;" >
					<u-checkbox v-model="isBalancePay" @change="isVXpay=false;isGoods_price=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
				<!-- <text style="color: #FF6C1D;font-size: 28rpx;" v-else>去充值</text> -->
			</view>
			<!-- 余额支付 -->
			<view class="flex-r-b-c" style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;"
				v-if="orderConfirm.idcrode>1">
				<view class="flex-r-b-c">
					<image src="../../static/icon/yue.png" mode="widthFix" style="width: 45rpx;"></image>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">货款支付</text>
					<text
						style="color: #4B4B4B;font-size: 24rpx;margin-left: 24rpx;">当前货款余额：¥{{orderConfirm.goods_price}}</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;" v-if="orderConfirm.goods_price >= totalPrice">
					<u-checkbox v-model="isGoods_price" @change="isVXpay=false;isBalancePay=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
				<navigator url="/distribution/settlement/settlement?type=3" style="color: #FF6C1D;font-size: 28rpx;"
					v-else hover-class="none">去充值</navigator>
			</view>
			<view class="flex-c-c-c"
				style="width:686rpx;height: 90rpx;background-color:#45806E;border-radius: 58rpx;font-size: 32rpx;color: #FFF;position: fixed;bottom:108rpx;left: 32rpx;"
				@click="fk_fn()">
				确认支付
			</view>
		</u-popup>

	</view>
</template>

<script>
	import base from '../../api/base.js'
	export default {
		data() {
			return {
				url: base.imgUrl, // 图片地址
				// 商品 id 列表
				goodsId: [],
				tabCurrent: 0, // tab 下标（自提-邮寄）
				checked: false, // 是否使用积分
				checkedBtn: false, // 静止点击
				isCoupon: false, // 优惠卷弹框
				orderConfirm: {}, // 确认订单信息
				addressInfo: null, // 邮寄到家地址信息
				couponId: null, // 优惠券 id
				couponText: '', // 显示优惠券
				discountPrice: 0, //已抵扣价格
				totalPrice: 0, //剩余价格
				istoPay: false, //时候弹出下拉支付弹框
				isVXpay: true, //默认微信支付
				balance: 30, //我的余额
				isBalancePay: false, //是否使用余额支付
				isGoods_price: false, //是否使用货款支付
				couponObj: {}, //选中优惠劵对象
				pageData: {}
			};
		},
		onLoad(el) {
			console.log(el)
			this.pageData = JSON.parse(decodeURIComponent(el.goods))
			console.log(JSON.parse(decodeURIComponent(el.goods)))
			this.goodsId = JSON.parse(decodeURIComponent(el.goods))
			this.getOrderConfirm() // 获取确认订单信息
			this.getDefaultAddress() // 获取用户默认地址
		},
		onShow() {
			// this.getDefaultAddress()
			this.$api.Order_mybalance().then(res => {
				this.orderConfirm.balance = res.data.data.balance
				this.orderConfirm.goods_price = res.data.data.goods_price
			})
		},
		methods: {
			fn_isone(){
				if(this.orderConfirm.isone==2){
					uni.showToast({
						title: '该服务不支持邮寄到家',
						icon: 'none'
					})
				}else{
					this.tabCurrent = 1;
				}
			},
			fk_fns() { //点击确认付款
				this.istoPay = true
			},
			fk_fn() {
				if (this.tabCurrent == 1 && !this.addressInfo) {
					this.istoPay = false
					uni.showToast({
						title: '请选择邮寄到家的地址',
						icon: 'none'
					})
					return
				}
				let that = this,
					obj = {
						goods: that.goodsId[0]?.id ? that.goodsId : null, //商品id及数量
						coupon_id: that.couponId, //优惠券ID
						type: that.checked ? 1 : 2, //是否使用积分1-是2-否
						address_type: that.tabCurrent == 0 ? 1 : 2, //1-门店自提2-邮寄到家
						address_id: that.tabCurrent == 0 ? 0 : that.addressInfo.id, //如果是邮寄到家 需要传地址ID否则传0
						activity_id: that.goodsId?.activity_id, //活动ID
						group_team: that.goodsId?.group_team, //拼团团队组ID
						activity_num: that.goodsId?.activity_num, //活动商品数量
						pay_type: that.isVXpay ? 1 : that.isBalancePay ? 3 : 4
					}
				console.log(that.goodsId?.activity_num, that.goodsId, obj)
				that.$api.Order_submit(obj).then(res => {
					if (res.data.code === 1000) {
						if (that.isVXpay) { //微信支付
							if (that.totalPrice <= 0) {
								uni.redirectTo({
									url: '../ordersTrue/ordersTrue?type=2&isone=' + that.pageData.isone
								})
							} else {
								uni.requestPayment({
									provider: 'wxpay',
									...res.data.data.prePay,
									success: function(res) {
										uni.redirectTo({
											url: '../ordersTrue/ordersTrue?type=2&isone=' + that.pageData.isone
										})
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						} else if (this.isBalancePay) { // 余额支付
							uni.redirectTo({
								url: '../ordersTrue/ordersTrue?type=2&isone=' + that.pageData.isone
							})
						} else if (this.isGoods_price) { //货款支付
							uni.redirectTo({
								url: '../ordersTrue/ordersTrue?type=2&isone=' + that.pageData.isone
							})
						}
					} else {
						uni.showToast({
							title: '订单生成错误,请重试!',
							icon: "none"
						})
					}

				})
			},
			// 获取确认订单信息
			getOrderConfirm() {
				let that = this
				if (that.goodsId.activity_id) {
					var data = {
						activity_id: that.goodsId.activity_id,
						activity_num: that.goodsId.activity_num
					}
				} else if (that.goodsId.activity_id && that.goodsId.group_team) {
					var data = {
						activity_id: that.goodsId.activity_id,
						activity_num: that.goodsId.activity_num,
						group_team: that.goodsId.group_team
					}
				} else {
					var data = {
						goods: that.goodsId
					}
				}
				that.$api.order_confirm(data).then(res => {
					console.log(res)
					that.orderConfirm = res.data.data
					that.totalPrice = res.data.data.price
					if(res.data.data.coupon.length != 0){
						that.popupBtn(res.data.data.coupon[0])
					}
				})
			},
			// 获取用户默认地址
			getDefaultAddress(data) {
				let that = this
				that.$api.address_details(data).then(res => {
					console.log(res)
					that.addressInfo = res.data.data
				})
			},
			// 点击跳转选择用户地址
			goAddressList() {
				uni.navigateTo({
					url: '/order/addressList/addressList'
				})
			},
			// 是否使用积分
			checkedChange(e) {
				let that = this
				if (that.checkedBtn) return
				let totalPrice = that.totalPrice
				let discountPrice = that.discountPrice
				if (that.orderConfirm.integral == 0) {
					uni.showToast({
						title: '您当前的积分不足',
						icon: 'none'
					})
					that.checkedBtn = true
					that.checked = false
				} else {
					that.checked = !that.checked
				}
				if (that.checked) {
					that.discountPrice = that.numFilter(Number(discountPrice) + Number(that.orderConfirm.iprice))
					that.totalPrice = that.numFilter(Number(totalPrice) - Number(that.orderConfirm.iprice))
				} else {
					that.discountPrice = that.numFilter(Number(discountPrice) - Number(that.orderConfirm.iprice))
					that.totalPrice = that.numFilter(Number(totalPrice) + Number(that.orderConfirm.iprice))
				}

			},
			// 点击查看可用优惠卷列表
			isCuponList() {
				let that = this
				if (that.orderConfirm.coupon.length != 0) {
					that.isCoupon = true
				}
			},
			falseCoupun() { //不使用优惠劵
				this.couponObj = {}
				this.couponId = null
				this.couponText = ''
				let jifen = this.checked ? Number(this.orderConfirm.iprice) : 0
				this.discountPrice = this.numFilter(jifen)
				this.totalPrice = this.numFilter(Number(this.orderConfirm.price) - jifen)
				this.isCoupon = false
			},
			// 点击使用优惠卷
			popupBtn(e) {
				let that = this
				that.couponObj = e
				let id = e.coupon_id
				that.totalPrice = that.orderConfirm.price
				that.couponId = id
				//type  1=折扣 2=减免劵
				let jifen = that.checked ? Number(that.orderConfirm.iprice) : 0
				that.couponText = e.type == 1 ? e.discount + '折' : e.price
				that.discountPrice = e.type == 1 ? that.numFilter(Number(that.orderConfirm.price - (that.orderConfirm
					.price * e.discount *
					0.1))) : that.numFilter(jifen + Number(e.price))
				that.totalPrice = e.type == 1 ? that.numFilter(Number(that.totalPrice) - Number(that.orderConfirm.price -
					(that.orderConfirm.price * e.discount * 0.1))) : that.numFilter(Number(that.totalPrice) - (Number(e
					.price) + jifen))
				that.isCoupon = false
			},
			// 保留小数点后两位
			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		}
	}
</script>

<style lang="less">
	.orderConfirm {
		width: 90vw;
		height: auto;
		margin: 40rpx auto;
		box-sizing: border-box;
		padding-bottom: 100rpx;
		margin: 40rpx auto;

		.tab_box {
			width: 100%;
			height: 90rpx;
			align-items: flex-end !important;
			position: relative;

			.tab_item {
				width: 50%;
			}

			.active {
				height: 70rpx;
				background: #EAEAEA;
				border-radius: 0rpx 28rpx 0px 28rpx;
				z-index: 99;

				text {
					color: #4B4B4B;
					font-size: 28rpx;
				}
			}

			.active3 {
				height: 70rpx;
				background: #EAEAEA;
				border-radius: 28rpx 0rpx 28rpx 0rpx;
				z-index: 99;

				text {
					color: #4B4B4B;
					font-size: 28rpx;
				}
			}

			.active2 {
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 28rpx 28rpx 0rpx 28rpx;
				z-index: 99;

				text {
					font-size: 36rpx;
					color: #0F4C3A;
					font-weight: bold;
				}
			}

			.active1 {
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 28rpx 28rpx 28rpx 0rpx;
				z-index: 99;

				text {
					font-size: 36rpx;
					color: #0F4C3A;
					font-weight: bold;
				}
			}
		}

		//
		.address_box {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 40rpx;
			background-color: #FFFFFF;
			border-bottom-left-radius: 28rpx;
			border-bottom-right-radius: 28rpx;

			.address {
				font-size: 32rpx;
				font-weight: bold;
				color: #4B4B4B;
			}

			.address_b {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #4B4B4B;

				.tel {
					margin-left: 20rpx;
					color: #9B9B9B;
				}
			}
		}

		//
		.list_box {
			background-color: #FFFFFF;
			margin: 30rpx 0rpx;
			border-radius: 28rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.list {
				box-sizing: border-box;
				padding-bottom: 20rpx;
				border-top: 1px solid #F2F2F2;
				position: relative;

				.give {
					width: 102rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(180deg, #FE9871 0%, #FD613E 100%);
					position: absolute;
					top: 16rpx;
					left: 10rpx;
				}

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.list_f {
					width: 65%;
					line-height: 50rpx;
					margin-top: 10rpx;

					.name {
						font-weight: bold;
						font-size: 36rpx;
						color: #3B3B3B;
					}

					.introduce {
						font-size: 24rpx;
						color: #3B3B3B;
						font-weight: 500;
					}

					.list_f_b {
						margin-top: 20rpx;

						.money {
							font-size: 34rpx;
							font-weight: 400;
							color: #FF6C1D;

							text {
								margin-left: 8rpx;
								display: inline-block;
								font-size: 42rpx;
							}
						}

						.number {
							font-size: 32rpx;
							color: #B4B4B4;

							text {
								display: inline-block;
								font-size: 36rpx;
								color: #0F4C3A;
								margin-left: 8rpx;
							}
						}
					}
				}

				&:nth-child(2) {
					border: none;
				}

			}


		}

		//
		.details_box {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 28rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.list {
				border-bottom: 1px solid #F2F2F2;
				height: 100rpx;

				&:last-child {
					border: none;
				}

				.name {
					font-size: 28rpx;
					color: #585858;
					font-weight: 500;
				}

				.money {
					color: #FF6C1D;
					font-size: 24rpx;
					font-weight: 500;

					text {
						display: inline-block;
						font-size: 32rpx;
						margin-left: 8rpx;
					}
				}

				.coupon {
					font-size: 28rpx;
					font-weight: 500;
					color: #585858;
				}

				.u-checkbox__label {
					display: none;
				}
			}
		}

		//
		.bottom_box {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 108rpx;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			background-color: #FFFFFF;

			.list_l {
				font-size: 28rpx;
				color: #696969;
				font-weight: 500;

				.money {
					font-size: 34rpx;
					color: #FF6C1D;
					font-weight: 400;

					text {
						display: inline-block;
						font-weight: bold;
						font-size: 42rpx;
						margin-left: 6rpx;
					}
				}
			}

			.list_f {
				.list_f_l {
					margin-right: 20rpx;
					color: #696969;
					font-size: 24rpx;
					font-weight: 500;

					.money {
						margin-left: 6rpx;
						font-size: 20rpx;

						text {
							margin-left: 4rpx;
							display: inline-block;
							font-size: 28rpx;
						}
					}
				}

				.btn {
					width: 228rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background-color: #45806E;
					border-radius: 40rpx;
					letter-spacing: 20rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		//
		.pendingPayment_box {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 30rpx;
			margin: 30rpx 0rpx;
			border-radius: 28rpx;
			background-color: #FFFFFF;

			.list {
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;

				.name {
					color: #585858;
					font-size: 28rpx;
					font-weight: 500;
				}

				.coupon {
					color: #FF6C1D;
					font-weight: 400;
					font-size: 32rpx;

					text {
						display: inline-block;
						font-weight: 500;
						font-size: 36rpx;
						margin-left: 8rpx;
					}
				}

				&:last-child {
					border: none;
				}
			}
		}

		//
		.order_box {
			background-color: #FFFFFF;
			border-radius: 28rpx;
			margin: 30rpx 0rpx;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F2F2F2;
				padding: 0rpx 30rpx;
				color: #898989;
				font-size: 24rpx;
				font-weight: 500;
			}

			.order_list {
				height: 100rpx;
				line-height: 100rpx;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #585858;

				.orderNumber {
					text {
						display: inline-block;
						color: #FF6C1D;
						font-size: 24rpx;
						margin-left: 30rpx;
					}
				}

				.time {
					font-size: 24rpx;
				}
			}
		}

		// 
		.pendingPayment_bottom {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 108rpx;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			background-color: #FFFFFF;

			.cancel {
				width: 182rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #898989;
				border: 1px solid #CCCCCC;
			}

			.payment {
				width: 182rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
				background-color: #45806E;
			}
		}

		.couponPopup {
			.list {
				width: 90%;
				height: 160rpx;
				margin: 40rpx auto;
				background-size: 100% 100%;

				&:nth-child(1) {
					margin-top: 80rpx;
				}


				.list_l {
					width: 58%;

					.list_l_l {
						color: #C48A46;
						font-size: 28rpx;
						font-weight: 500;

						text {
							display: inline-block;
							font-size: 68rpx;
							margin-left: 10rpx;
							margin-right: 10rpx;
						}
					}

					.list_l_r {
						font-weight: 500;
						margin-left: 16rpx;

						.name {
							font-size: 32rpx;
							color: #505050;
						}

						.limit {
							font-size: 24rpx;
							color: #8E8E8E;
						}
					}
				}

				.list_r {
					width: 30%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #916724;
					background: linear-gradient(157deg, #EBCB8A 0%, #E8BE6C 100%);
					margin: auto;
				}
			}
		}
	}
</style>
